#HTML <link>

The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

#Attributes

• as: This attribute is required when rel="preload" has been set on the <link> element, optional when rel="modulepreload" has been set, and otherwise should not be used. It specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.

  Furthermore, rel="preload" uses this as a signal for request prioritization. The table below lists the valid values for this attribute and the elements or resources they apply to.

  Value	Applies To
  audio	<audio> elements
  document	<iframe> and <frame> elements
  embed	<embed> elements
  fetch	fetch, XHR Note: This value also requires <link> to contain the crossorigin attribute, see CORS-enabled fetches.
  font	CSS @font-face Note: This value also requires <link> to contain the crossorigin attribute, see CORS-enabled fetches.
  image	<img> and <picture> elements with srcset or imageset attributes, SVG <image> elements, CSS *-image rules
  object	<object> elements
  script	<script> elements, Worker importScripts
  style	<link rel=stylesheet> elements, CSS @import
  track	<track> elements
  video	<video> elements
  worker	Worker, SharedWorker

• blocking: This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. It must only be used when the rel attribute contains expect or stylesheet keywords. The operations that are to be blocked must be a space-separated list of blocking tokens listed below.

  • render: The rendering of content on the screen is blocked.

• crossorigin: This enumerated attribute indicates whether CORS must be used when fetching the resource. CORS-enabled images can be reused in the <canvas> element without being tainted. The allowed values are:

  • anonymous: A cross-origin request (i.e., with an Origin HTTP header) is performed, but no credential is sent (i.e., no cookie, X.509 certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin HTTP header) the resource will be tainted and its usage restricted.
  • use-credentials: A cross-origin request (i.e., with an Origin HTTP header) is performed along with a credential sent (i.e., a cookie, certificate, and/or HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials HTTP header), the resource will be tainted and its usage restricted.

  If the attribute is not present, the resource is fetched without a CORS request (i.e., without sending the Origin HTTP header), preventing its non-tainted usage. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

• disabled: For rel="stylesheet" only, the disabled Boolean attribute indicates whether the described stylesheet should be loaded and applied to the document. If disabled is specified in the HTML when it is loaded, the stylesheet will not be loaded during page load. Instead, the stylesheet will be loaded on-demand, if and when the disabled attribute is changed to false or removed.

  Setting the disabled property in the DOM causes the stylesheet to be removed from the document's Document.styleSheets list.

• fetchpriority: Provides a hint of the relative priority to use when fetching a resource of a particular type. Allowed values:

  • high: Fetch the resource at a high priority relative to other resources of the same type.
  • low: Fetch the resource at a low priority relative to other resources of the same type.
  • auto: Don't set a preference for the fetch priority. This is the default. It is used if no value or an invalid value is set.

  See HTMLLinkElement.fetchPriority for more information.

• href: This attribute specifies the URL of the linked resource. A URL can be absolute or relative.

• hreflang: This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are specified by RFC 5646: Tags for Identifying Languages (also known as BCP 47). Use this attribute only if the href attribute is present.

• imagesizes: For rel="preload" and as="image" only, the imagesizes attribute has similar syntax and semantics as the sizes attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

• imagesrcset: For rel="preload" and as="image" only, the imagesrcset attribute has similar syntax and semantics as the srcset attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

• integrity: Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you're telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered without unexpected manipulation. The attribute must only be specified when the rel attribute is specified to stylesheet, preload, or modulepreload. See Subresource Integrity.

• media: This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.

• referrerpolicy: A string indicating which referrer to use when fetching the resource:

  • no-referrer means that the Referer header will not be sent.
  • no-referrer-when-downgrade means that no Referer header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.
  • origin means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.
  • origin-when-cross-origin means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.
  • unsafe-url means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

• rel: This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of link type values.

• sizes: This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains a value of icon or a non-standard type such as Apple's apple-touch-icon. It may have the following values:

  • any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.
  • a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.

  Note: Most icon formats are only able to store one single icon; therefore, most of the time, the sizes attribute contains only one entry. Microsoft's ICO format and Apple's ICNS format can store multiple icon sizes in a single file. ICO has better browser support, so you should use this format if cross-browser support is a concern.

• title: The title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a default or an alternate stylesheet.

• type: This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as text/css), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the type attribute, but is actually now recommended practice. It is also used on rel="preload" link types, to make sure the browser only downloads file types that it supports.